<!DOCTYPE html>
<html lang="en">
<head>
    
    <meta charset="utf-8">
    <title>my-pro/src/Pro.vue - Documentation</title>
    
    
    <script src="scripts/prettify/prettify.js"></script>
    <script src="scripts/prettify/lang-css.js"></script>
    <link type="text/css" rel="stylesheet" href="styles/prettify.css">
    <link type="text/css" rel="stylesheet" href="styles/jsdoc.css">
    <script src="scripts/nav.js" defer></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<input type="checkbox" id="nav-trigger" class="nav-trigger" />
<label for="nav-trigger" class="navicon-button x">
  <div class="navicon"></div>
</label>

<label for="nav-trigger" class="overlay"></label>

<nav >
    
    <h2><a href="index.html">Home</a></h2><h3>Classes</h3><ul><li><a href="Outline.html">Outline</a></li><li><a href="Tag.html">Tag</a></li><li><a href="TagCanvas.html">TagCanvas</a></li></ul><h3>Modules</h3><ul><li><a href="module-$ui_components_my-affix.html">$ui/components/my-affix</a></li><li><a href="module-$ui_components_my-anchor.html">$ui/components/my-anchor</a></li><li><a href="module-$ui_components_my-autocomplete.html">$ui/components/my-autocomplete</a></li><li><a href="module-$ui_components_my-avatar.html">$ui/components/my-avatar</a></li><li><a href="module-$ui_components_my-avatars.html">$ui/components/my-avatars</a></li><li><a href="module-$ui_components_my-back-top.html">$ui/components/my-back-top</a></li><li><a href="module-$ui_components_my-capture.html">$ui/components/my-capture</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-capture.html#~_renderImg">_renderImg</a></li></ul></li><li><a href="module-$ui_components_my-card-list.html">$ui/components/my-card-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-card-list.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-cascader.html">$ui/components/my-cascader</a></li><li><a href="module-$ui_components_my-checkbox.html">$ui/components/my-checkbox</a></li><li><a href="module-$ui_components_my-clipboard.html">$ui/components/my-clipboard</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-clipboard.html#~copy">copy</a></li></ul></li><li><a href="module-$ui_components_my-color-picker.html">$ui/components/my-color-picker</a></li><li><a href="module-$ui_components_my-contextmenu.html">$ui/components/my-contextmenu</a></li><li><a href="module-$ui_components_my-corner-mark.html">$ui/components/my-corner-mark</a></li><li><a href="module-$ui_components_my-crud.html">$ui/components/my-crud</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-crud.html#~openAddDialog">openAddDialog</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-crud.html#~reload">reload</a></li></ul></li><li><a href="module-$ui_components_my-date.html">$ui/components/my-date</a></li><li><a href="module-$ui_components_my-date-picker.html">$ui/components/my-date-picker</a></li><li><a href="module-$ui_components_my-description.html">$ui/components/my-description</a></li><li><a href="module-$ui_components_my-detail.html">$ui/components/my-detail</a></li><li><a href="module-$ui_components_my-detail-item.html">$ui/components/my-detail-item</a></li><li><a href="module-$ui_components_my-dialog.html">$ui/components/my-dialog</a></li><li><a href="module-$ui_components_my-drag.html">$ui/components/my-drag</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-drag.html#~getRelativeEl">getRelativeEl</a></li></ul></li><li><a href="module-$ui_components_my-drop.html">$ui/components/my-drop</a></li><li><a href="module-$ui_components_my-edit-tags.html">$ui/components/my-edit-tags</a></li><li><a href="module-$ui_components_my-editor.html">$ui/components/my-editor</a></li><li><a href="module-$ui_components_my-empty.html">$ui/components/my-empty</a></li><li><a href="module-$ui_components_my-filter.html">$ui/components/my-filter</a></li><li><a href="module-$ui_components_my-fixed.html">$ui/components/my-fixed</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-fixed.html#~resize">resize</a></li></ul></li><li><a href="module-$ui_components_my-flex.html">$ui/components/my-flex</a></li><li><a href="module-$ui_components_my-flex-item.html">$ui/components/my-flex-item</a></li><li><a href="module-$ui_components_my-flip.html">$ui/components/my-flip</a></li><li><a href="module-$ui_components_my-float.html">$ui/components/my-float</a></li><li><a href="module-$ui_components_my-float-item.html">$ui/components/my-float-item</a></li><li><a href="module-$ui_components_my-form.html">$ui/components/my-form</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-form.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-form.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-form_src_Base.html">$ui/components/my-form/src/Base</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html">$ui/components/my-form/src/common/TagInput</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html">$ui/components/my-form/src/common/TagSelect</a></li><li><a href="module-$ui_components_my-form_src_common_TreeSelect.html">$ui/components/my-form/src/common/TreeSelect</a></li><li><a href="module-$ui_components_my-header.html">$ui/components/my-header</a></li><li><a href="module-$ui_components_my-highlight.html">$ui/components/my-highlight</a></li><li><a href="module-$ui_components_my-icon.html">$ui/components/my-icon</a></li><li><a href="module-$ui_components_my-im-wall.html">$ui/components/my-im-wall</a></li><li><a href="module-$ui_components_my-input.html">$ui/components/my-input</a></li><li><a href="module-$ui_components_my-input-number.html">$ui/components/my-input-number</a></li><li><a href="module-$ui_components_my-layout.html">$ui/components/my-layout</a></li><li><a href="module-$ui_components_my-lazy.html">$ui/components/my-lazy</a></li><li><a href="module-$ui_components_my-list.html">$ui/components/my-list</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-list.html#~load">load</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~refresh">refresh</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-list.html#~scrollTop">scrollTop</a></li></ul></li><li><a href="module-$ui_components_my-location-picker.html">$ui/components/my-location-picker</a></li><li><a href="module-$ui_components_my-login.html">$ui/components/my-login</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-login.html#~submit">submit</a></li></ul></li><li><a href="module-$ui_components_my-marquee.html">$ui/components/my-marquee</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-marquee.html#~pause">pause</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-marquee.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-master-app.html">$ui/components/my-master-app</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-master-app.html#~initState">initState</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~onStateChange">onStateChange</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~onStateChange">onStateChange</a></li><li data-type='method'><a href="module-$ui_components_my-master-app.html#~setState">setState</a></li></ul></li><li><a href="module-$ui_components_my-menu.html">$ui/components/my-menu</a></li><li><a href="module-$ui_components_my-micro-app.html">$ui/components/my-micro-app</a></li><li><a href="module-$ui_components_my-navbar.html">$ui/components/my-navbar</a></li><li><a href="module-$ui_components_my-navbar-FullScreenAction.html">$ui/components/my-navbar-FullScreenAction</a></li><li><a href="module-$ui_components_my-navbar-IconAction.html">$ui/components/my-navbar-IconAction</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html">$ui/components/my-navbar-UserAction</a></li><li><a href="module-$ui_components_my-number.html">$ui/components/my-number</a></li><li><a href="module-$ui_components_my-panel.html">$ui/components/my-panel</a></li><li><a href="module-$ui_components_my-paragraph.html">$ui/components/my-paragraph</a></li><li><a href="module-$ui_components_my-pro.html">$ui/components/my-pro</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-pro.html#~addTab">addTab</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~closeTabs">closeTabs</a></li><li data-type='method'><a href="module-$ui_components_my-pro.html#~setTab">setTab</a></li></ul></li><li><a href="module-$ui_components_my-promise.html">$ui/components/my-promise</a></li><li><a href="module-$ui_components_my-radial-menu.html">$ui/components/my-radial-menu</a></li><li><a href="module-$ui_components_my-radio.html">$ui/components/my-radio</a></li><li><a href="module-$ui_components_my-range.html">$ui/components/my-range</a></li><li><a href="module-$ui_components_my-rate.html">$ui/components/my-rate</a></li><li><a href="module-$ui_components_my-resize.html">$ui/components/my-resize</a></li><li><a href="module-$ui_components_my-result.html">$ui/components/my-result</a></li><li><a href="module-$ui_components_my-revolve.html">$ui/components/my-revolve</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-revolve.html#~next">next</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~prev">prev</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-revolve.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-search-box.html">$ui/components/my-search-box</a></li><li><a href="module-$ui_components_my-select.html">$ui/components/my-select</a></li><li><a href="module-$ui_components_my-sidebar.html">$ui/components/my-sidebar</a></li><li><a href="module-$ui_components_my-skeleton.html">$ui/components/my-skeleton</a></li><li><a href="module-$ui_components_my-slider.html">$ui/components/my-slider</a></li><li><a href="module-$ui_components_my-sortable.html">$ui/components/my-sortable</a></li><li><a href="module-$ui_components_my-spin.html">$ui/components/my-spin</a></li><li><a href="module-$ui_components_my-stat-card.html">$ui/components/my-stat-card</a></li><li><a href="module-$ui_components_my-switch.html">$ui/components/my-switch</a></li><li><a href="module-$ui_components_my-table.html">$ui/components/my-table</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-table.html#~refresh">refresh</a></li></ul></li><li><a href="module-$ui_components_my-tabs.html">$ui/components/my-tabs</a></li><li><a href="module-$ui_components_my-tag-canvas.html">$ui/components/my-tag-canvas</a></li><li><a href="module-$ui_components_my-tag-input.html">$ui/components/my-tag-input</a></li><li><a href="module-$ui_components_my-tag-select.html">$ui/components/my-tag-select</a></li><li><a href="module-$ui_components_my-text.html">$ui/components/my-text</a></li><li><a href="module-$ui_components_my-timer.html">$ui/components/my-timer</a><ul class='methods'><li data-type='method'><a href="module-$ui_components_my-timer.html#~reset">reset</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~start">start</a></li><li data-type='method'><a href="module-$ui_components_my-timer.html#~stop">stop</a></li></ul></li><li><a href="module-$ui_components_my-title.html">$ui/components/my-title</a></li><li><a href="module-$ui_components_my-tree-select.html">$ui/components/my-tree-select</a></li><li><a href="module-$ui_components_my-typography.html">$ui/components/my-typography</a></li><li><a href="module-$ui_components_my-water-fall.html">$ui/components/my-water-fall</a></li><li><a href="module-$ui_components_my-watermark.html">$ui/components/my-watermark</a></li><li><a href="module-$ui_components_my-wave.html">$ui/components/my-wave</a></li><li><a href="module-$ui_components_my-wrapper.html">$ui/components/my-wrapper</a></li><li><a href="module-widgets_my-print.html">widgets/my-print</a></li></ul><h3>Events</h3><ul><li><a href="module-$ui_components_my-stat-card.html#~event:action">action</a></li><li></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:add">add</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:back">back</a></li><li><a href="module-$ui_components_my-dialog.html#~event:cancel">cancel</a></li><li><a href="module-$ui_components_my-typography.html#~event:change">change</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-radial-menu.html#~event:click">click</a></li><li></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-avatars.html#~event:click-add">click-add</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-item">click-item</a></li><li><a href="module-$ui_components_my-avatars.html#~event:click-more">click-more</a></li><li><a href="module-$ui_components_my-radial-menu.html#~event:close">close</a></li><li></li><li><a href="module-$ui_components_my-pro.html#~event:collapse">collapse</a></li><li><a href="module-$ui_components_my-form_src_common_TagSelect.html#~event:collapsed">collapsed</a></li><li><a href="module-$ui_components_my-table.html#~event:column-change">column-change</a></li><li><a href="module-$ui_components_my-navbar-UserAction.html#~event:command">command</a></li><li></li><li></li><li><a href="global.html#event:complete">complete</a></li><li></li><li><a href="module-$ui_components_my-typography.html#event:copy">copy</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drag.html#~event:drag">drag</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-start">drag-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:drag-stop">drag-stop</a></li><li><a href="module-$ui_components_my-drop.html#~event:drop">drop</a></li><li><a href="module-$ui_components_my-typography.html#event:edited">edited</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:editing">editing</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:enter">enter</a></li><li><a href="module-$ui_components_my-table.html#~event:error">error</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-typography.html#event:expand">expand</a></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:finish">finish</a></li><li><a href="module-$ui_components_my-dialog.html#~event:hide">hide</a></li><li><a href="module-$ui_components_my-lazy.html#~event:init">init</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:input-change">input-change</a></li><li><a href="module-$ui_components_my-drop.html#~event:leave">leave</a></li><li><a href="module-$ui_components_my-wrapper.html#~event:link-click">link-click</a></li><li><a href="module-$ui_components_my-dialog.html#~event:load">load</a></li><li><a href="module-$ui_components_my-revolve.html#~event:loaded">loaded</a></li><li><a href="module-$ui_components_my-dialog.html#~event:maximize">maximize</a></li><li><a href="module-$ui_components_my-im-wall.html#~event:on-added">on-added</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-capture">on-capture</a></li><li><a href="global.html#event:on-change">on-change</a></li><li><a href="module-$ui_components_my-tag-canvas.html#~event:on-click">on-click</a></li><li><a href="module-$ui_components_my-capture.html#~event:on-output">on-output</a></li><li><a href="module-$ui_components_my-radial-menu.html#~event:open">open</a></li><li></li><li><a href="module-$ui_components_my-drop.html#~event:over">over</a></li><li><a href="global.html#~event:page-change">page-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-login.html#~event:pki">pki</a></li><li><a href="module-$ui_components_my-revolve.html#~event:progress">progress</a></li><li><a href="module-$ui_components_my-form_src_common_TagInput.html#~event:remove">remove</a></li><li><a href="module-$ui_components_my-timer.html#~event:reset">reset</a></li><li></li><li><a href="module-$ui_components_my-resize.html#~event:resize">resize</a></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-start">resize-start</a></li><li><a href="module-$ui_components_my-dialog.html#~event:resize-stop">resize-stop</a></li><li><a href="module-$ui_components_my-search-box.html#~event:search">search</a></li><li><a href="module-$ui_components_my-sidebar.html#~event:select">select</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-dialog.html#~event:show">show</a></li><li><a href="global.html#~event:size-change">size-change</a></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:start">start</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-timer.html#~event:stop">stop</a></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-login.html#~event:submit">submit</a></li><li></li><li></li><li><a href="module-$ui_components_my-table.html#~event:success">success</a></li><li></li><li></li><li></li><li></li><li></li><li><a href="module-$ui_components_my-panel.html#~event:tab-change">tab-change</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-remove">tab-remove</a></li><li><a href="module-$ui_components_my-pro.html#~event:tab-select">tab-select</a></li><li><a href="module-$ui_components_my-timer.html#~event:tick">tick</a></li><li><a href="module-$ui_components_my-form.html#~event:validate">validate</a></li><li><a href="module-widgets_my-back-top.html#event:click">click</a></li></ul><h3>Global</h3><ul><li><a href="global.html#AddShadowToImage">AddShadowToImage</a></li><li><a href="global.html#appendChildNode">appendChildNode</a></li><li><a href="global.html#createEllipsisContainer">createEllipsisContainer</a></li><li><a href="global.html#createEllipsisContentHolder">createEllipsisContentHolder</a></li><li><a href="global.html#destroyVue">destroyVue</a></li><li><a href="global.html#getData">getData</a></li><li><a href="global.html#inRange">inRange</a></li><li><a href="global.html#instanceVue">instanceVue</a></li><li><a href="global.html#props">props</a></li><li><a href="global.html#pxToNumber">pxToNumber</a></li><li><a href="global.html#removeEllipsisContainer">removeEllipsisContainer</a></li><li><a href="global.html#RoundImage">RoundImage</a></li><li><a href="global.html#scrollTop">scrollTop</a></li><li><a href="global.html#setData">setData</a></li><li><a href="global.html#styleToString">styleToString</a></li><li><a href="global.html#wrapperDecorations">wrapperDecorations</a></li></ul>
</nav>

<div id="main">
    
    <h1 class="page-title">my-pro/src/Pro.vue</h1>
    

    



    
    <section>
        <article>
            <pre class="prettyprint source linenums"><code>&lt;template>
  &lt;my-layout :class="classes" :direction="direction" :west="west" :fit="fixed" :north="north">
    &lt;template v-if="header" v-slot:north>
      &lt;my-navbar v-bind="navbarOptions"
                 @select="handleMenuSelect"
                 :collapsed.sync="collapsed">
        &lt;Breadcrumb v-if="breadcrumbVisible &amp;&amp; breadcrumbList &amp;&amp; breadcrumbList.length"
                    :class="`my-pro__breadcrumb is-${navbarOptions.theme}`"
                    :data="breadcrumbList">&lt;/Breadcrumb>
        &lt;slot v-if="$slots.navbar" name="navbar">&lt;/slot>
        &lt;template v-slot:actions>
          &lt;slot name="actions">&lt;/slot>
        &lt;/template>
      &lt;/my-navbar>
    &lt;/template>

    &lt;template v-if="sidebarOptions" v-slot:west>
      &lt;my-sidebar v-bind="sidebarOptions"
                  v-clickoutside="handleClickOutside"
                  :menus="sidebarMenus"
                  :menuProps="menuProps"
                  @select="handleMenuSelect"
                  :collapsed.sync="collapsed">
        &lt;slot name="sidebar">&lt;/slot>
        &lt;template v-slot:append>
          &lt;slot name="append">&lt;/slot>
        &lt;/template>
      &lt;/my-sidebar>
    &lt;/template>

    &lt;Tabs v-if="tab &amp;&amp; tabs.length"
          :data="tabs"
          :active="activeTabValue"
          @select="handleTabSelect"
          @command="handleTabCommand"
          @remove="handleTabRemove">&lt;/Tabs>

    &lt;div class="my-pro__main" :class="mainClasses">
      &lt;slot>&lt;/slot>
    &lt;/div>

  &lt;/my-layout>
&lt;/template>

&lt;script>
  /**
   * 后台布局框架组件
   * @module $ui/components/my-pro
   */
  import {MyLayout, MyNavbar, MySidebar} from '$ui'
  import Breadcrumb from './Breadcrumb'
  import Tabs from './Tabs'
  import clickoutside from 'element-ui/lib/utils/clickoutside'
  import responsive from '$ui/utils/responsive'
  import defaultLogo from '$ui/assets/logo.png'

  const {IconAction, UserAction, FullScreenAction, Action} = MyNavbar

  /**
   * 插槽
   * @member slots
   * @property {string} default 默认插槽，定义主体内容，通常放 router-view
   * @property {string} navbar 顶部菜单附加内容
   * @property {string} actions 顶部菜单操作区内容，如放置：IconAction, UserAction, FullScreenAction
   * @property {string} sidebar 左侧菜单前置内容
   * @property {string} append 左侧菜单后置内容
   *
   */
  export default {
    IconAction,
    UserAction,
    FullScreenAction,
    Action,
    name: 'MyPro',
    components: {
      MyLayout,
      MyNavbar,
      MySidebar,
      Breadcrumb,
      Tabs
    },
    directives: {
      clickoutside
    },
    provide() {
      return {
        myPro: this
      }
    },
    /**
     * 属性参数
     * @member props
     * @property {string} [logo] 品牌logo图片地址
     * @property {string} [title=MyWeb] 品牌名称
     * @property {string} [version] 版本号徽标
     * @property {string} [href] 点击logo调转的链接
     * @property {Array} [menus] 菜单数据数组，与MyMenu组件一致
     * @property {string} [menus.icon] 图标className
     * @property {string} [menus.text] 菜单项标题文字
     * @property {number|object} [menus.badge] 徽标配置
     * @property {string} [menus.index] 菜单项标识，可以是路由path
     * @property {string} [menus.trigger] 菜单打开页面方式，可选值：route 路由打开、href 链接打开、blank 新窗口打开链接、event 触发事件
     * @property {boolean} [menus.disabled] 禁用菜单项
     * @property {Item[]} [menus.children] 子菜单
     * @property {boolean} [menus.group] 是否分组
     * @property {string} [menus.title] 分组标题
     * @property {Object} [menuProps] 菜单组件配置，参考MyMenu
     * @property {string} [mode=sidebar] 导航模式: sidebar(侧边菜单布局)、navbar(顶部菜单布局)、both(侧边+顶部菜单布局)
     * @property {string} [sidebarTheme=light] 侧边栏主题，可选值：'light', 'dark', 'primary', 'gradual'
     * @property {string} [navbarTheme=light] 顶部导航主题，可选值：'light', 'dark', 'primary', 'gradual'
     * @property {Object} [navbarProps] MyNavbar组件附加参数，mode=both 时有效
     * @property {Boolean} [menusLevelSplit] 菜单数据第一层拆分放到navbar，与sidebar联动，mode=both 时有效
     * @property {Boolean} [navbarActive] navbar 菜单激活函数，menusLevelSplit=true时有效
     * @property {boolean} [fixed=false] 固定菜单栏（包括侧边和顶部）
     * @property {boolean} [colorWeak=false] 色弱模式
     * @property {boolean} [collapsible=true] 开启折叠切换
     * @property {boolean} [header=true] 显示头部
     * @property {boolean} [rainbow=true] 顶部导航显示海虹边框
     * @property {Object|Function} [breadcrumb] 面包屑数据按路由path的映射对象或构建函数
     * @property {string|Function} [documentTitle] 默认页面标题文本，如设置该属性，即开启按路由meta的title属性设置页面标题
     * @property {Object|Function} [tab] 默认选项卡导航，如果设置该属性，即开始按路由meta的tab属性设置导航选项卡，对象字段{label, value, icon}
     * @property {string} tab.label 选项卡标题
     * @property {string} tab.value 选项卡标识，实用路由path
     * @property {string|object} [tab.icon] 选项卡图标配置
     */
    props: {
      logo: {
        type: String,
        default: defaultLogo
      },
      title: {
        type: String,
        default: 'MyWeb'
      },
      version: {
        type: String
      },
      href: String,
      menus: {
        type: Array
      },
      menuProps: Object,
      // 导航模式: sidebar(侧边菜单布局)、navbar(顶部菜单布局)、both(侧边+顶部菜单布局)
      mode: {
        type: String,
        default: 'sidebar',
        validator(val) {
          return ['sidebar', 'navbar', 'both'].includes(val)
        }
      },
      sidebarTheme: String,
      navbarTheme: String,
      // 顶部菜单，在 mode=both 有效
      navbarProps: Object,
      menusLevelSplit: Boolean,
      // navbar 菜单激活函数，menusLevelSplit=true时有效
      navbarActive: {
        type: Function
      },
      // 固定菜单栏（包括侧边和顶部）
      fixed: Boolean,
      // 色弱模式
      colorWeak: Boolean,
      // 开启折叠切换
      collapsible: {
        type: Boolean,
        default: true
      },
      // 显示头部
      header: {
        type: Boolean,
        default: true
      },
      // 顶部导航显示海虹边框
      rainbow: {
        type: Boolean,
        default: true
      },
      breadcrumb: [Object, Function],
      // 页面默认标题，如果设置，即开启动态页面标题功能
      documentTitle: [String, Function],
      // 初始tab，设置即开始tabs功能
      tab: [Object, Function]
    },
    data() {
      return {
        collapsed: false,
        screen: {},
        breadcrumbList: [],
        tabs: [],
        activeTabValue: ''
      }
    },
    computed: {
      classes() {
        const screen = {}
        Object.keys(this.screen).forEach(n => {
          screen[`is-${n}`] = this.screen[n]
        })
        return {
          'my-pro': true,
          'is-color-weak': this.colorWeak,
          'is-collapsed': this.collapsed,
          [`my-pro--${this.mode}`]: true,
          'is-rainbow': this.rainbow,
          [`my-pro--${this.sidebarTheme}`]: !!this.sidebarTheme,
          'is-fixed': this.fixed,
          'is-menus-level-split': this.menusLevelSplit,
          ...screen
        }
      },
      direction() {
        return this.mode === 'sidebar' ? 'horizontal' : 'vertical'
      },
      west() {
        const {xs} = this.screen
        return {
          width: this.collapsed ? (xs ? 0 : 65) : 256
        }
      },
      north() {
        return {
          height: ((this.mode === 'both' &amp;&amp; this.rainbow) ||
            this.mode === 'sidebar' ||
            (this.mode === 'navbar' &amp;&amp; this.rainbow)) ? 61 : 60
        }
      },
      navbarOptions() {
        let opt = null
        const {xs} = this.screen
        switch (this.mode) {
          case 'sidebar':
            opt = {
              title: null,
              logo: null,
              collapsible: this.collapsible,
              theme: this.navbarTheme,
              shadow: false
            }
            break
          case 'navbar':
            opt = {
              title: xs ? null : this.title,
              logo: this.logo,
              version: xs ? null : this.version,
              href: this.href,
              collapsible: false,
              theme: this.navbarTheme,
              menus: xs ? null : this.menus,
              menuProps: this.menuProps,
              shadow: true
            }
            break
          case 'both':
            opt = {
              title: xs ? null : this.title,
              logo: this.logo,
              version: xs ? null : this.version,
              href: this.href,
              collapsible: !!xs,
              theme: this.navbarTheme,
              shadow: true,
              menus: this.getTopLevelMenus(),
              menuProps: {
                router: true,
                defaultActive: this.defaultNavbarActive()
              },
              ...(this.navbarProps || {})
            }
            break
        }
        return opt
      },
      sidebarOptions() {
        let opt = null
        // const {xs} = this.screen
        switch (this.mode) {
          case 'sidebar':
            opt = {
              title: this.title,
              logo: this.logo,
              href: this.href,
              version: this.version,
              theme: this.sidebarTheme,
              collapsible: false,
              shadow: true
            }
            break
          case 'both':
            opt = {
              title: null,
              logo: null,
              version: null,
              collapsible: this.collapsible,
              theme: this.sidebarTheme,
              shadow: false
            }
            break
        }
        return opt
      },
      breadcrumbVisible() {
        if (!this.breadcrumb) return false
        const {xs} = this.screen
        return !xs
      },
      mainClasses() {
        return {
          'is-fixed': this.fixed,
          'has-tabs': !!this.tab
        }
      },
      sidebarMenus() {
        if (!this.menus) return []
        if (this.mode === 'both' &amp;&amp; this.menusLevelSplit) {
          const path = this.$route.path
          const item = this.menus.find(n => path.startsWith(n.index))
          return item?.children || []
        } else {
          return this.menus
        }
      }
    },
    watch: {
      collapsed(val) {
        /**
         * 折叠发送改变时触发
         * @event collapse
         * @param {boolean} collapsed 是否折叠
         */
        this.$emit('collapse', val)
      },
      $route: {
        immediate: true,
        handler() {
          const matched = this.$route.matched.slice(0).pop()
          this.$nextTick(() => {
            this.updateBreadcrumbList(matched)
            const tab = this.collectTab(this.$route.fullPath, matched)
            tab &amp;&amp; this.addTab(tab)
          })
          this.updateDocumentTitle(matched)
        }
      },
      tab: {
        immediate: true,
        handler() {
          this.addDefaultTab()
        }
      }
    },
    methods: {
      handleMenuSelect(item) {
        /**
         * 菜单项选中时触发
         * @event select
         * @param {Object} item 菜单项对象
         */
        this.$emit('select', item)
      },
      updateScreen(screen) {
        this.screen = screen
        if (this.mode === 'sidebar') {
          if (this.screen.sm &amp;&amp; !this.collapsed) {
            this.collapsed = true
          }
          if (this.screen.lg &amp;&amp; this.collapsed) {
            this.collapsed = false
          }
        }

        if (this.mode === 'both') {
          if (this.screen.sm &amp;&amp; !this.collapsed) {
            this.collapsed = true
          }
          if (this.screen.lg &amp;&amp; this.collapsed) {
            this.collapsed = false
          }
        }


      },
      handleClickOutside() {
        if (this.mode === 'sidebar' &amp;&amp; this.screen.xs &amp;&amp; !this.collapsed) {
          this.collapsed = true
        }
      },
      updateBreadcrumbList(matched) {
        if (!this.breadcrumb) return
        if (!matched) {
          this.breadcrumbList = null
          return
        }
        if (typeof this.breadcrumb === 'function') {
          this.breadcrumbList = this.breadcrumb(matched)
        } else {
          this.breadcrumbList = this.breadcrumb[matched.path] || []
        }
      },
      updateDocumentTitle(matched) {
        if (!this.documentTitle) return

        document.title = typeof this.documentTitle === 'function'
          ? this.documentTitle(matched)
          : ((matched.meta || {}).title || this.documentTitle)
      },
      addDefaultTab() {
        if (!this.tab) return
        const isFunction = typeof this.tab === 'function'
        if (isFunction) {
          const tab = this.tab()
          tab &amp;&amp; this.addTab({
            ...tab,
            closable: false
          })
        } else {
          this.addTab({
            ...this.tab,
            closable: false
          })
        }

      },
      collectTab(fullPath, matched) {
        if (!this.tab) return null
        const isFunction = typeof this.tab === 'function'
        if (isFunction) {
          const tab = this.tab(fullPath, matched)
          if (!tab) return null
          return {
            closable: true,
            ...tab
          }
        } else {
          const isDefault = fullPath === this.tab.value
          const {tab, icon} = matched.meta || {}
          if (!tab) return null
          return {
            label: tab,
            value: fullPath,
            icon: icon,
            path: matched.path,
            closable: true,
            ...(isDefault ? {
              ...this.tab,
              closable: false
            } : null)
          }
        }


      },
      /**
       * 添加选项卡
       * @method addTab
       * @param {Object} tab 选项卡配置
       * @param {string} tab.label 标题
       * @param {string} tab.value 页面访问路由path
       * @param {string|object} [tab.icon] 图标
       * @param {boolean} [tab.closable] 能否关闭
       * @param {string} [tab.path] 页面路由原始path
       */
      addTab(tab) {
        if (!tab) return
        tab.path = tab.path || tab.value
        const index = this.tabs.findIndex(n => n.value === tab.value || n.path === tab.path)
        if (index > -1) {
          this.tabs.splice(index, 1, tab)
        } else {
          this.tabs.push(tab)
        }
        this.activeTabValue = tab.value

      },
      /**
       * 更新当前选项卡配置
       * @method setTab
       * @param {object} tab 选项卡配置 {label,value,closable,path,icon}
       */
      setTab(tab) {
        this.$nextTick(() => {
          const fullPath = this.$route.fullPath
          const tabIndex = this.tabs.findIndex(t => t.value === fullPath)
          if (tabIndex > -1) {
            const newTab = {
              ...this.tabs[tabIndex],
              ...tab
            }
            this.tabs.splice(tabIndex, 1, newTab)
          }
        })
      },
      /**
       * 关闭选项卡
       * @method closeTabs
       * @param {string|Function} value 选项卡的value 或 path，也可是查找函数,return true 关闭
       */
      closeTabs(value) {
        const filter = typeof value === 'function'
          ? value
          : tab => tab.path === value || tab.value === value
        this.tabs = this.tabs.filter((tab, index) => !filter(tab, index))
      },
      handleTabSelect(tab, index) {
        if (tab.value) {
          this.$router.push(tab.value)
        }
        /**
         * 选择选项卡时触发
         * @event tab-select
         * @param {object} tab 选项卡配置对象
         * @param {number} index 选项的索引
         */
        this.$emit('tab-select', tab, index)
      },
      handleTabRemove(tab, index) {
        this.tabs.splice(index, 1)
        // 删除的是选择的tab
        if (tab.value === this.activeTabValue) {
          const current = this.tabs[index] || this.tabs[this.tabs.length - 1]
          current &amp;&amp; this.$router.push(current.value)
        }
        /**
         * 关闭选项卡时触发
         * @event tab-remove
         * @param {object} tab 选项卡配置对象
         * @param {number} index 选项的索引
         */
        this.$emit('tab-remove', tab, index)
      },
      handleTabCommand(command, tab, index) {
        switch (command) {
          case 'left':
            this.tabs.splice(1, index - 1)
            break
          case 'right':
            this.tabs.splice(index + 1, this.tabs.length)
            break
          case 'other':
            if (index === 0) {
              this.tabs.splice(1)
            } else {
              this.tabs = [this.tabs[0], this.tabs[index]]
            }
            break
          case 'all':
            this.tabs.splice(1)
            if (this.tabs[0]) {
              this.$router.push(this.tabs[0].value)
            }
            break
        }
      },
      getTopLevelMenus() {
        return this.menusLevelSplit
          ? this.menus.map(n => {
            const {icon, index, text} = n
            return {
              icon,
              index,
              text
            }
          })
          : null
      },
      defaultNavbarActive() {
        const paths = this.$route.path.split('/')
        if (paths.length > 2) {
          return paths.slice(0, 2).join('/')
        }
        return null
      }
    },
    created() {
      this.token = responsive.on(e => {
        this.updateScreen(e)
      })


    },
    updated() {
      this.$nextTick(() => {
        const matched = this.$route.matched.slice(0).pop()
        this.updateBreadcrumbList(matched)
      })
    },
    beforeDestroy() {
      this.token &amp;&amp; responsive.off(this.token)
    }
  }
&lt;/script>

</code></pre>
        </article>
    </section>





    
</div>

<br class="clear">

<footer>
    Documentation generated by <a href="https://github.com/jsdoc3/jsdoc">JSDoc 3.6.6</a> on Wed Nov 18 2020 13:00:34 GMT+0800 (GMT+08:00) using the <a href="https://github.com/clenemt/docdash">docdash</a> theme.
</footer>

<script>prettyPrint();</script>
<script src="scripts/polyfill.js"></script>
<script src="scripts/linenumber.js"></script>




<script>
var _hmt = _hmt || [];
(function() {
  var hm = document.createElement("script");
  hm.src = "https://hm.baidu.com/hm.js?c4e5f73318b5cb0c389e3d9a05f831cc";
  var s = document.getElementsByTagName("script")[0];
  s.parentNode.insertBefore(hm, s);
})();
</script>

</body>
</html>
